<template>
  <div class="quality-management-page">
    <div class="page-header">
      <h2>质量管理体系</h2>
      <div class="header-actions">
        <el-button type="primary" icon="Plus" @click="showInspectionDialog = true">新增质检单</el-button>
        <el-button icon="Download">导出报告</el-button>
      </div>
    </div>

    <!-- 质量概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><CircleCheck /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalInspections }}</div>
            <div class="stat-label">质检总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><Trophy /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.passRate }}%</div>
            <div class="stat-label">合格率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><Select /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.excellentRate }}%</div>
            <div class="stat-label">优品率</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.defectCount }}</div>
            <div class="stat-label">不合格数</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 主内容 -->
    <el-card class="main-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!-- 质检单管理 -->
        <el-tab-pane label="质检单管理" name="inspections">
          <el-form :inline="true" :model="filterForm" class="filter-form">
            <el-form-item label="产品名称">
              <el-input v-model="filterForm.productName" placeholder="请输入产品名称" clearable />
            </el-form-item>
            <el-form-item label="质检类型">
              <el-select v-model="filterForm.inspectionType" placeholder="请选择类型" clearable>
                <el-option label="来料检验" value="incoming" />
                <el-option label="过程检验" value="process" />
                <el-option label="成品检验" value="final" />
                <el-option label="出货检验" value="outgoing" />
              </el-select>
            </el-form-item>
            <el-form-item label="质检结果">
              <el-select v-model="filterForm.result" placeholder="请选择结果" clearable>
                <el-option label="合格" value="pass" />
                <el-option label="不合格" value="fail" />
                <el-option label="待检" value="pending" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
              <el-button icon="Refresh" @click="handleReset">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="inspectionList" stripe>
            <el-table-column prop="inspectionNo" label="质检单号" width="150" />
            <el-table-column prop="productName" label="产品名称" width="180" />
            <el-table-column prop="batchNo" label="批次号" width="120" />
            <el-table-column prop="inspectionType" label="检验类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ getInspectionTypeText(row.inspectionType) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="检验数量" width="100" align="center" />
            <el-table-column prop="sampleSize" label="抽样数" width="100" align="center" />
            <el-table-column prop="passCount" label="合格数" width="100" align="center">
              <template #default="{ row }">
                <el-tag type="success">{{ row.passCount }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="failCount" label="不合格数" width="100" align="center">
              <template #default="{ row }">
                <el-tag v-if="row.failCount > 0" type="danger">{{ row.failCount }}</el-tag>
                <el-tag v-else type="info">0</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="result" label="检验结果" width="100" align="center">
              <template #default="{ row }">
                <el-tag :type="getResultType(row.result)">{{ getResultText(row.result) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="inspector" label="检验员" width="100" />
            <el-table-column prop="inspectionDate" label="检验日期" width="120" />
            <el-table-column label="操作" width="240" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewInspectionDetail(row)">详情</el-button>
                <el-button link type="success" @click="viewPhotos(row)">照片</el-button>
                <el-button link type="warning" @click="editInspection(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 质量标准 -->
        <el-tab-pane label="质量标准" name="standards">
          <el-button type="primary" icon="Plus" @click="showStandardDialog = true" style="margin-bottom: 15px">
            添加标准
          </el-button>

          <el-table :data="standardList" stripe border>
            <el-table-column prop="category" label="标准类别" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.category }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="标准名称" width="200" />
            <el-table-column prop="code" label="标准编号" width="150" />
            <el-table-column prop="version" label="版本号" width="100" align="center" />
            <el-table-column prop="effectiveDate" label="生效日期" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStandardStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="标准描述" min-width="200" show-overflow-tooltip />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewStandard(row)">查看</el-button>
                <el-button link type="success" @click="downloadStandard(row)">下载</el-button>
                <el-button link type="warning" @click="editStandard(row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 不合格品管理 -->
        <el-tab-pane label="不合格品" name="defects">
          <el-table :data="defectList" stripe>
            <el-table-column prop="defectNo" label="不合格品编号" width="150" />
            <el-table-column prop="productName" label="产品名称" width="180" />
            <el-table-column prop="defectType" label="缺陷类型" width="120">
              <template #default="{ row }">
                <el-tag type="warning">{{ row.defectType }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="defectDescription" label="缺陷描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="quantity" label="数量" width="100" align="center" />
            <el-table-column prop="severity" label="严重程度" width="120" align="center">
              <template #default="{ row }">
                <el-tag :type="getSeverityType(row.severity)">{{ row.severity }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="handleMethod" label="处理方式" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.handleMethod }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="处理状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getHandleStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reportDate" label="报告日期" width="120" />
            <el-table-column label="操作" width="220" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewDefectDetail(row)">详情</el-button>
                <el-button link type="success" @click="handleDefect(row)">处理</el-button>
                <el-button link type="warning" @click="createCAPA(row)">CAPA</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- CAPA管理（纠正预防措施） -->
        <el-tab-pane label="CAPA管理" name="capa">
          <el-button type="primary" icon="Plus" @click="showCAPADialog = true" style="margin-bottom: 15px">
            创建CAPA
          </el-button>

          <el-table :data="capaList" stripe>
            <el-table-column prop="capaNo" label="CAPA编号" width="150" />
            <el-table-column prop="title" label="标题" width="200" />
            <el-table-column prop="type" label="类型" width="120">
              <template #default="{ row }">
                <el-tag>{{ row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="problemDescription" label="问题描述" min-width="200" show-overflow-tooltip />
            <el-table-column prop="rootCause" label="根本原因" min-width="180" show-overflow-tooltip />
            <el-table-column prop="action" label="措施" min-width="180" show-overflow-tooltip />
            <el-table-column prop="responsible" label="负责人" width="100" />
            <el-table-column prop="dueDate" label="完成期限" width="120" />
            <el-table-column prop="progress" label="进度" width="150" align="center">
              <template #default="{ row }">
                <el-progress :percentage="row.progress" />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getCAPAStatusType(row.status)">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="viewCAPA(row)">详情</el-button>
                <el-button link type="success" @click="updateCAPAProgress(row)">更新进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 质量分析 -->
        <el-tab-pane label="质量分析" name="analysis">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>质量趋势分析</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    质量趋势折线图
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>缺陷类型分布</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    缺陷类型柱状图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>帕累托分析</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    帕累托图（80/20法则）
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <template #header>
                  <span>质量控制图</span>
                </template>
                <div class="chart-container">
                  <div style="text-align: center; padding: 80px 0; color: #909399">
                    SPC统计过程控制图
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 质量指标汇总 -->
          <el-card style="margin-top: 20px">
            <template #header>
              <span>质量指标汇总</span>
            </template>
            <el-descriptions :column="3" border>
              <el-descriptions-item label="总检验批次">{{ qualityMetrics.totalBatches }}</el-descriptions-item>
              <el-descriptions-item label="合格批次">{{ qualityMetrics.passBatches }}</el-descriptions-item>
              <el-descriptions-item label="不合格批次">{{ qualityMetrics.failBatches }}</el-descriptions-item>
              <el-descriptions-item label="批合格率">{{ qualityMetrics.batchPassRate }}%</el-descriptions-item>
              <el-descriptions-item label="总检验数量">{{ qualityMetrics.totalQuantity }}</el-descriptions-item>
              <el-descriptions-item label="合格数量">{{ qualityMetrics.passQuantity }}</el-descriptions-item>
              <el-descriptions-item label="数量合格率">{{ qualityMetrics.quantityPassRate }}%</el-descriptions-item>
              <el-descriptions-item label="一次合格率">{{ qualityMetrics.firstPassRate }}%</el-descriptions-item>
              <el-descriptions-item label="返工率">{{ qualityMetrics.reworkRate }}%</el-descriptions-item>
              <el-descriptions-item label="报废率">{{ qualityMetrics.scrapRate }}%</el-descriptions-item>
              <el-descriptions-item label="CPK值">{{ qualityMetrics.cpk }}</el-descriptions-item>
              <el-descriptions-item label="PPM值">{{ qualityMetrics.ppm }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 新增质检单对话框 -->
    <el-dialog v-model="showInspectionDialog" title="新增质检单" width="800px">
      <el-form :model="inspectionForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="产品名称">
              <el-input v-model="inspectionForm.productName" placeholder="请输入产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次号">
              <el-input v-model="inspectionForm.batchNo" placeholder="请输入批次号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检验类型">
              <el-select v-model="inspectionForm.inspectionType" placeholder="请选择类型">
                <el-option label="来料检验" value="incoming" />
                <el-option label="过程检验" value="process" />
                <el-option label="成品检验" value="final" />
                <el-option label="出货检验" value="outgoing" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检验日期">
              <el-date-picker
                v-model="inspectionForm.inspectionDate"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="检验数量">
              <el-input-number v-model="inspectionForm.quantity" :min="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抽样数">
              <el-input-number v-model="inspectionForm.sampleSize" :min="1" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合格数">
              <el-input-number v-model="inspectionForm.passCount" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="检验标准">
          <el-select v-model="inspectionForm.standardId" placeholder="请选择标准" filterable>
            <el-option
              v-for="standard in standardList"
              :key="standard.id"
              :label="standard.name"
              :value="standard.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检验项目">
          <el-input
            v-model="inspectionForm.inspectionItems"
            type="textarea"
            :rows="3"
            placeholder="请输入检验项目"
          />
        </el-form-item>
        <el-form-item label="检验结论">
          <el-radio-group v-model="inspectionForm.result">
            <el-radio label="pass">合格</el-radio>
            <el-radio label="fail">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input
            v-model="inspectionForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showInspectionDialog = false">取消</el-button>
        <el-button type="primary" @click="handleInspectionSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 添加标准对话框 -->
    <el-dialog v-model="showStandardDialog" title="添加质量标准" width="600px">
      <el-form :model="standardForm" label-width="100px">
        <el-form-item label="标准类别">
          <el-select v-model="standardForm.category" placeholder="请选择类别">
            <el-option label="国家标准" value="national" />
            <el-option label="行业标准" value="industry" />
            <el-option label="企业标准" value="enterprise" />
            <el-option label="国际标准" value="international" />
          </el-select>
        </el-form-item>
        <el-form-item label="标准名称">
          <el-input v-model="standardForm.name" placeholder="请输入标准名称" />
        </el-form-item>
        <el-form-item label="标准编号">
          <el-input v-model="standardForm.code" placeholder="请输入标准编号" />
        </el-form-item>
        <el-form-item label="版本号">
          <el-input v-model="standardForm.version" placeholder="如：V1.0" />
        </el-form-item>
        <el-form-item label="生效日期">
          <el-date-picker
            v-model="standardForm.effectiveDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="标准描述">
          <el-input
            v-model="standardForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入标准描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showStandardDialog = false">取消</el-button>
        <el-button type="primary" @click="handleStandardSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 创建CAPA对话框 -->
    <el-dialog v-model="showCAPADialog" title="创建CAPA" width="700px">
      <el-form :model="capaForm" label-width="100px">
        <el-form-item label="标题">
          <el-input v-model="capaForm.title" placeholder="请输入CAPA标题" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="capaForm.type" placeholder="请选择类型">
            <el-option label="纠正措施" value="corrective" />
            <el-option label="预防措施" value="preventive" />
            <el-option label="纠正与预防" value="both" />
          </el-select>
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input
            v-model="capaForm.problemDescription"
            type="textarea"
            :rows="3"
            placeholder="请输入问题描述"
          />
        </el-form-item>
        <el-form-item label="根本原因">
          <el-input
            v-model="capaForm.rootCause"
            type="textarea"
            :rows="3"
            placeholder="请输入根本原因分析"
          />
        </el-form-item>
        <el-form-item label="纠正措施">
          <el-input
            v-model="capaForm.action"
            type="textarea"
            :rows="3"
            placeholder="请输入纠正/预防措施"
          />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="capaForm.responsible" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="完成期限">
          <el-date-picker
            v-model="capaForm.dueDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCAPADialog = false">取消</el-button>
        <el-button type="primary" @click="handleCAPASubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 统计数据
const stats = reactive({
  totalInspections: 1285,
  passRate: 96.5,
  excellentRate: 88.2,
  defectCount: 45
})

// 当前标签页
const activeTab = ref('inspections')

// 筛选表单
const filterForm = reactive({
  productName: '',
  inspectionType: '',
  result: ''
})

// 质检单列表
const inspectionList = ref([
  {
    id: 1,
    inspectionNo: 'QC202501001',
    productName: 'iPhone 15 Pro 外壳',
    batchNo: 'BATCH-2025-001',
    inspectionType: 'incoming',
    quantity: 1000,
    sampleSize: 80,
    passCount: 78,
    failCount: 2,
    result: 'pass',
    inspector: '张三',
    inspectionDate: '2025-01-12'
  },
  {
    id: 2,
    inspectionNo: 'QC202501002',
    productName: 'MacBook Air 主板',
    batchNo: 'BATCH-2025-002',
    inspectionType: 'process',
    quantity: 500,
    sampleSize: 50,
    passCount: 50,
    failCount: 0,
    result: 'pass',
    inspector: '李四',
    inspectionDate: '2025-01-11'
  }
])

// 质量标准列表
const standardList = ref([
  {
    id: 1,
    category: '国家标准',
    name: 'GB/T 19001-2016 质量管理体系要求',
    code: 'GB/T 19001-2016',
    version: 'V1.0',
    effectiveDate: '2016-12-30',
    status: '有效',
    description: 'ISO 9001:2015质量管理体系国家标准'
  },
  {
    id: 2,
    category: '企业标准',
    name: '电子产品外观检验标准',
    code: 'QS-001-2024',
    version: 'V2.1',
    effectiveDate: '2024-01-01',
    status: '有效',
    description: '适用于公司所有电子产品的外观质量检验'
  }
])

// 不合格品列表
const defectList = ref([
  {
    id: 1,
    defectNo: 'DEF-2025-001',
    productName: 'iPhone 15 Pro 外壳',
    defectType: '外观缺陷',
    defectDescription: '表面有划痕和污渍',
    quantity: 2,
    severity: '轻微',
    handleMethod: '返工',
    status: '已处理',
    reportDate: '2025-01-12'
  },
  {
    id: 2,
    defectNo: 'DEF-2025-002',
    productName: '手机显示屏',
    defectType: '功能缺陷',
    defectDescription: '显示屏存在坏点',
    quantity: 5,
    severity: '严重',
    handleMethod: '报废',
    status: '处理中',
    reportDate: '2025-01-10'
  }
])

// CAPA列表
const capaList = ref([
  {
    id: 1,
    capaNo: 'CAPA-2025-001',
    title: '外观质量改进计划',
    type: '纠正措施',
    problemDescription: '近期外观不良率上升，需要改进生产工艺',
    rootCause: '生产环境粉尘较大，操作员培训不足',
    action: '加强生产环境管理，增加培训课程',
    responsible: '张经理',
    dueDate: '2025-02-28',
    progress: 65,
    status: '进行中'
  },
  {
    id: 2,
    capaNo: 'CAPA-2025-002',
    title: '供应商质量提升',
    type: '预防措施',
    problemDescription: '预防来料质量波动',
    rootCause: '供应商质量管理体系不完善',
    action: '建立供应商质量审核制度，定期评估',
    responsible: '李主管',
    dueDate: '2025-03-31',
    progress: 40,
    status: '进行中'
  }
])

// 质量指标
const qualityMetrics = reactive({
  totalBatches: 485,
  passBatches: 468,
  failBatches: 17,
  batchPassRate: 96.5,
  totalQuantity: 125680,
  passQuantity: 121285,
  quantityPassRate: 96.5,
  firstPassRate: 94.2,
  reworkRate: 2.3,
  scrapRate: 1.2,
  cpk: 1.67,
  ppm: 350
})

// 对话框
const showInspectionDialog = ref(false)
const showStandardDialog = ref(false)
const showCAPADialog = ref(false)

// 表单
const inspectionForm = reactive({
  productName: '',
  batchNo: '',
  inspectionType: '',
  inspectionDate: '',
  quantity: 0,
  sampleSize: 0,
  passCount: 0,
  standardId: '',
  inspectionItems: '',
  result: 'pass',
  remarks: ''
})

const standardForm = reactive({
  category: '',
  name: '',
  code: '',
  version: '',
  effectiveDate: '',
  description: ''
})

const capaForm = reactive({
  title: '',
  type: '',
  problemDescription: '',
  rootCause: '',
  action: '',
  responsible: '',
  dueDate: ''
})

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 方法
const getInspectionTypeText = (type) => {
  const types = {
    incoming: '来料检验',
    process: '过程检验',
    final: '成品检验',
    outgoing: '出货检验'
  }
  return types[type] || type
}

const getResultType = (result) => {
  const types = {
    pass: 'success',
    fail: 'danger',
    pending: 'warning'
  }
  return types[result] || 'info'
}

const getResultText = (result) => {
  const texts = {
    pass: '合格',
    fail: '不合格',
    pending: '待检'
  }
  return texts[result] || result
}

const getStandardStatusType = (status) => {
  return status === '有效' ? 'success' : 'info'
}

const getSeverityType = (severity) => {
  const types = {
    '轻微': 'info',
    '一般': 'warning',
    '严重': 'danger',
    '致命': 'danger'
  }
  return types[severity] || 'info'
}

const getHandleStatusType = (status) => {
  const types = {
    '已处理': 'success',
    '处理中': 'warning',
    '待处理': 'info'
  }
  return types[status] || 'info'
}

const getCAPAStatusType = (status) => {
  const types = {
    '进行中': 'warning',
    '已完成': 'success',
    '已关闭': 'info'
  }
  return types[status] || 'info'
}

const handleTabClick = (tab) => {
  console.log('切换标签页', tab.props.name)
}

const handleSearch = () => {
  console.log('搜索', filterForm)
  ElMessage.success('搜索成功')
}

const handleReset = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const viewInspectionDetail = (row) => {
  console.log('查看质检详情', row)
  ElMessage.info('查看质检详情')
}

const viewPhotos = (row) => {
  console.log('查看照片', row)
  ElMessage.info('查看质检照片')
}

const editInspection = (row) => {
  Object.assign(inspectionForm, row)
  showInspectionDialog.value = true
}

const viewStandard = (row) => {
  console.log('查看标准', row)
  ElMessage.info('查看质量标准')
}

const downloadStandard = (row) => {
  console.log('下载标准', row)
  ElMessage.success('标准文件下载成功')
}

const editStandard = (row) => {
  Object.assign(standardForm, row)
  showStandardDialog.value = true
}

const viewDefectDetail = (row) => {
  console.log('查看不合格品详情', row)
  ElMessage.info('查看不合格品详情')
}

const handleDefect = (row) => {
  console.log('处理不合格品', row)
  ElMessage.success('不合格品已处理')
}

const createCAPA = (row) => {
  console.log('创建CAPA', row)
  showCAPADialog.value = true
}

const viewCAPA = (row) => {
  console.log('查看CAPA', row)
  ElMessage.info('查看CAPA详情')
}

const updateCAPAProgress = (row) => {
  console.log('更新CAPA进度', row)
  ElMessage.success('进度更新成功')
}

const handleInspectionSubmit = () => {
  console.log('提交质检单', inspectionForm)
  ElMessage.success('质检单提交成功')
  showInspectionDialog.value = false
}

const handleStandardSubmit = () => {
  console.log('提交标准', standardForm)
  ElMessage.success('标准添加成功')
  showStandardDialog.value = false
}

const handleCAPASubmit = () => {
  console.log('提交CAPA', capaForm)
  ElMessage.success('CAPA创建成功')
  showCAPADialog.value = false
}

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped lang="scss">
.quality-management-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.main-card {
  .filter-form {
    margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .chart-container {
    height: 300px;
  }
}
</style>

